﻿@{ Layout = "../Shared/_Layout.cshtml"; } @section Navs{
<li class="nav-item">
  <a class="nav-link" href="pageAdministrator.aspx">管理员管理</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="pageAdminRole.aspx">角色管理</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="pageAdminConfiguration.aspx">管理员设置</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="pageAdminDepartment.aspx">所属部门管理</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="pageAdminArea.aspx">所在区域管理</a>
</li>
<li class="nav-item">
  <a class="nav-link active show" href="adminAccessTokens.cshtml">API密钥管理</a>
</li>
}

<template v-if="pageType === 'add'">
  <div class="header-title">
    {{ item.id ? '修改API密钥' : '添加API密钥' }}
  </div>

  <div class="form-group">
    <label class="col-form-label">
      名称
    </label>
    <input v-model="item.title" type="text" class="form-control" />
  </div>

  <div class="form-group">
    <label class="col-form-label">
      关联管理员
    </label>
    <select v-model="item.adminName" class="form-control">
      <option v-for="adminName in adminNames" selected="adminName === item.adminName" v-bind:value="adminName">
        {{ adminName }}
      </option>
    </select>
    <small class="form-text text-muted">
      关联管理员定义API密钥的访问权限，API密钥的访问权限将被限制在此管理员的权限范围内
      <a href="https://docs.siteserver.cn/api/" target="_blank">阅读更多</a>
    </small>
  </div>

  <div class="form-group">
    <label class="col-form-label">
      授权范围
    </label>

    <div class="checkbox checkbox-primary">
      <template v-for="scope in scopes">
        <input type="checkbox" v-bind:id="scope" v-bind:value="scope" v-model="item.scopeList" />
        <label v-bind:for="scope" class="m-r-5">{{ scope }}</label>
      </template>
    </div>

    <small class="form-text text-muted">
      授权范围定义API密钥可访问的API地址，API密钥能够访问的API地址将被限制在授权范围内
      <a href="https://docs.siteserver.cn/api/" target="_blank">阅读更多</a>
    </small>
  </div>

  <hr />

  <button class="btn btn-primary m-r-5" v-on:click="btnSubmitClick">确 定</button>
  <button class="btn" v-on:click="btnCancelClick">返 回</button>

</template>
<template v-else>

  <table id="contents" class="table tablesaw table-hover m-0">
    <thead>
      <tr class="thead">
        <th>名称</th>
        <th>关联管理员</th>
        <th>授权范围</th>
        <th class="text-center">操作</th>
      </tr>
    </thead>
    <tbody>

      <tr v-for="item in items">
        <td class="text-nowrap">
          {{ item.title }}
        </td>
        <td class="text-nowrap">
          {{ item.adminName }}
        </td>
        <td class="text-nowrap">
          {{ getItemScopes(item) }}
        </td>
        <td class="text-center text-nowrap">
          <a href="javascript:;" v-on:click="btnViewClick(item)" class="btn btn-sm btn-primary m-r-5">获取密钥</a>
          <a href="javascript:;" v-on:click="btnAddClick(item)" class="btn btn-sm btn-success m-r-5">编 辑</a>
          <a href="javascript:;" v-on:click="btnDeleteClick(item)" class="btn btn-sm btn-danger m-r-5">删 除</a>
        </td>
      </tr>

    </tbody>
  </table>

  <hr />

  <a href="javascript:;" class="btn btn-primary m-r-5" v-on:click="btnAddClick({})">添加新密钥</a>

</template>

@section Scripts{
<script src="adminAccessTokens.js" type="text/javascript"></script> }